<script>
/* eslint-disable */
</script>
<template>
	<draggable
		class="dragArea"
		tag="ul"
		:clone="cloneObj"
		:list="tasks"
		:group="{ name: 'g1', pull: 'clone', put: false }"
	>
		<li v-for="el in tasks" :key="el.key">
			<p>{{ el.name }}</p>
            <!-- <Input v-model="el.name" style="width: 300px" /> -->
			<!-- <Input v-model="el.name" style="width: 300px" /> -->
			<nestedsource-draggable :tasks="el.tasks" :ipt="el.ipt" />
		</li>
	</draggable>
</template>
<script>
import draggable from 'vuedraggable'
function deepClone(obj) {
	if (!obj || typeof obj !== 'object') {
		return obj
	}
	if (obj instanceof RegExp) {
		// See https://github.com/Microsoft/TypeScript/issues/10990
		return obj
	}
	var result = Array.isArray(obj) ? [] : {}
	Object.keys(obj).forEach(function(key) {
		if (obj[key] && typeof obj[key] === 'object') {
			result[key] = deepClone(obj[key])
		} else {
			result[key] = obj[key]
		}
	})
	return result
}
export default {
	props: {
        ipt: {
			type: Array
        },
		tasks: {
			required: true,
			type: Array
		}
	},
	components: {
		draggable
	},

	name: 'nestedsource-draggable',

	methods: {
		//克隆的时候（dragstart），原始数据对象
		cloneObj: function(obj) {
			// if (obj && !obj.key) {
			// 	if (!window.globalIdx) {
			// 		window.globalIdx = 1
			// 	} else {
			// 		window.globalIdx++
			// 	}
			// 	obj.key = window.globalIdx
			// 	obj.tasks = []
			// }

			//创建对象必须克隆
			return deepClone(obj)
			// debugger
		}
	}
}
</script>
<style scoped>
.dragArea {
	min-height: 50px;
	outline: 1px dashed;
}
</style>
